<template>
  <div class="index">
    <!-- 总体框架 -->
    <V-CommonHeaderLeft>
      <div class="rightConter">
        <div class="conterLeftScroll">
          <el-row :gutter="10" style="margin:0;" class="show6u">
            <el-col :span="12">
              <div class="grid-content bg-purple tomGeneralMain">
                <div class="tomGeneral">
                  <span>今日概况</span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-test102"></use>
                  </svg>
                </div>
                <div class="tomGeneralCounter">
                  <el-row>
                    <el-col :span="4">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter1">555</div>
                          <div>订货单</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter1">555</div>
                          <div>下单客户</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <router-link class="tomCounter" to="/index">
                          <div class="tomCounter1 color1">555</div>
                          <div>库存预警</div>
                        </router-link>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <div class="tomCounter">
                          <div>
                            <circle-progress
                              percent="30"
                              size="60"
                              dynamicColor="#3864EC"
                              staticColor="#E8F7FD"
                            >
                              <p>30%</p>
                            </circle-progress>
                          </div>
                          <div>订单完成率</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <div class="tomCounter">
                          <div>
                            <circle-progress
                              percent="40"
                              size="60"
                              dynamicColor="#3864EC"
                              staticColor="#E8F7FD"
                            >
                              <p>40%</p>
                            </circle-progress>
                          </div>
                          <div>收款完成率</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <div class="tomCounter">
                          <div>
                            <circle-progress
                              percent="50"
                              size="60"
                              dynamicColor="#3864EC"
                              staticColor="#E8F7FD"
                            >
                              <p>50%</p>
                            </circle-progress>
                          </div>
                          <div>发货完成率</div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="grid-content bg-purple tomGeneralMain">
                <div class="tomGeneral">
                  <span>待办事项</span>
                </div>
                <div class="tomGeneralCounter">
                  <el-row>
                    <el-col :span="5">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <router-link class="tomCounter" to="/index">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-test250"></use>
                            </svg>
                          </div>
                          <div>待订单审核</div>
                        </router-link>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <router-link class="tomCounter" to="/index">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon icon2" aria-hidden="true">
                              <use xlink:href="#icon-test264"></use>
                            </svg>
                          </div>
                          <div>待退货审核</div>
                        </router-link>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <router-link class="tomCounter" to="/index">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon icon2" aria-hidden="true">
                              <use xlink:href="#icon-test299"></use>
                            </svg>
                          </div>
                          <div>待出库</div>
                        </router-link>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <router-link class="tomCounter" to="/index">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon icon2" aria-hidden="true">
                              <use xlink:href="#icon-test313"></use>
                            </svg>
                          </div>
                          <div>待发货</div>
                        </router-link>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <router-link class="tomCounter" to="/index">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon icon2" aria-hidden="true">
                              <use xlink:href="#icon-test335"></use>
                            </svg>
                          </div>
                          <div>收款待审核</div>
                        </router-link>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="margin:0 0 10px 0!important;" class="show8u">
            <el-col :span="24" class="b d">
              <div class="grid-content bg-purple tomGeneralMain">
                <div class="tomGeneral">
                  <span>今日概况</span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-test102"></use>
                  </svg>
                </div>
                <div class="tomGeneralCounter">
                  <el-row>
                    <el-col :span="4">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter1">555</div>
                          <div>订货单</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter1">555</div>
                          <div>下单客户</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter1 color1">555</div>
                          <div>库存预警</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <div class="tomCounter">
                          <div>
                            <circle-progress
                              percent="30"
                              size="60"
                              dynamicColor="#3864EC"
                              staticColor="#E8F7FD"
                            >
                              <p>30%</p>
                            </circle-progress>
                          </div>
                          <div>订单完成率</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <div class="tomCounter">
                          <div>
                            <circle-progress
                              percent="40"
                              size="60"
                              dynamicColor="#3864EC"
                              staticColor="#E8F7FD"
                            >
                              <p>40%</p>
                            </circle-progress>
                          </div>
                          <div>收款完成率</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <div class="tomCounter">
                          <div>
                            <circle-progress
                              percent="50"
                              size="60"
                              dynamicColor="#3864EC"
                              staticColor="#E8F7FD"
                            >
                              <p>50%</p>
                            </circle-progress>
                          </div>
                          <div>发货完成率</div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="margin:0;" class="show8u">
            <el-col :span="24" class="b d">
              <div class="grid-content bg-purple tomGeneralMain">
                <div class="tomGeneral">
                  <span>待办事项</span>
                </div>
                <div class="tomGeneralCounter">
                  <el-row>
                    <el-col :span="5">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-test250"></use>
                            </svg>
                          </div>
                          <div>待订单审核</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon icon2" aria-hidden="true">
                              <use xlink:href="#icon-test264"></use>
                            </svg>
                          </div>
                          <div>待退货审核</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon icon2" aria-hidden="true">
                              <use xlink:href="#icon-test299"></use>
                            </svg>
                          </div>
                          <div>待出库</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content bg-purple-light bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon icon2" aria-hidden="true">
                              <use xlink:href="#icon-test313"></use>
                            </svg>
                          </div>
                          <div>待发货</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content bg-purple bg-tomcounter">
                        <div class="tomCounter">
                          <div class="tomCounter2">
                            <div class="ringr">
                              <span>22</span>
                              <span :class="{showLive:22<99}">+</span>
                            </div>
                            <svg class="icon icon2" aria-hidden="true">
                              <use xlink:href="#icon-test335"></use>
                            </svg>
                          </div>
                          <div>收款待审核</div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24" class="rightHeadLine">
              <div class="grid-content bg-purple-dark rightHeadLineCon">
                <div
                  :class="{showColor:value.stateMain}"
                  v-for="(value,index) in stateContuct"
                  :key="index"
                  @click="clickShuo(index)"
                >
                  <span>{{value.text}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark generalcont">
                <div>
                  <span>经营概况</span>
                  <router-link to="/index">
                    详情
                    <svg class="icon icon3" aria-hidden="true">
                      <use xlink:href="#icon-test146"></use>
                    </svg>
                  </router-link>
                </div>
                <div>
                  <div class="linkCont">
                    <div
                      :class="{divcolorB:list.stateMain}"
                      v-for="(list,index2) in linkContData"
                      :key="index2"
                      @click="clickSelect(index2)"
                    >{{list.text}}</div>
                  </div>
                  <div>
                    <el-checkbox-group v-model="checkList">
                      <el-checkbox label="对比（同比）" @change="checkboxModel"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark sumEcharts">
                      <div ref="mainEcharts" class="echartsLine"></div>
                      <div class="echartsRight">
                        <div>
                          <span>订单金额/元</span>
                          <span>{{selectData.now.conMoney}}</span>
                          <span :class="{showLive:selectStatic}">{{selectData.before.conMoney}}</span>
                        </div>
                        <div>
                          <span>订货单数/笔</span>
                          <span>{{selectData.now.ConOrderSingular}}</span>
                          <span
                            :class="{showLive:selectStatic}"
                          >{{selectData.before.ConOrderSingular}}</span>
                        </div>
                        <div>
                          <span>订单毛利/元</span>
                          <span>{{selectData.now.gross}}</span>
                          <span :class="{showLive:selectStatic}">{{selectData.before.gross}}</span>
                        </div>
                        <div>
                          <span>订货单客户/个</span>
                          <span>{{selectData.now.client}}</span>
                          <span :class="{showLive:selectStatic}">{{selectData.before.client}}</span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <!-- <div class="sumEcharts">
                </div>-->
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark orderSituation">
                <div>
                  <span>客户订货情况</span>
                  <router-link to="/index">
                    详情
                    <svg class="icon icon3" aria-hidden="true">
                      <use xlink:href="#icon-test146"></use>
                    </svg>
                  </router-link>
                </div>
                <div class="cliceLeft">
                  <el-row>
                    <el-col :span="16">
                      <div class="grid-content bg-purple client">
                        <div class="clientCont">订货金额TOP10客户</div>
                        <el-row :gutter="24">
                          <el-col :span="12">
                            <div class="grid-content bg-purple clientCon">
                              <template v-for="(listO,index3) in orderSituationData">
                                <div v-if="index3<5" :key="index3">
                                  <div>
                                    <span
                                      :class="{iconSelfSa:index3<=2,iconSelfSb:index3>2}"
                                    >{{index3+1}}</span>
                                    <span>{{listO.text}}</span>
                                  </div>
                                  <div>¥{{listO.money}}</div>
                                </div>
                              </template>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <div class="grid-content bg-purple-light clientCon">
                              <template v-for="(listO,index3) in orderSituationData">
                                <div v-if="index3>=5" :key="index3">
                                  <div>
                                    <span
                                      :class="{iconSelfSa:index3<=2,iconSelfSb:index3>2}"
                                    >{{index3+1}}</span>
                                    <span>{{listO.text}}</span>
                                  </div>
                                  <div>¥{{listO.money}}</div>
                                </div>
                              </template>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple-light client">
                        <div ref="clientEcharts" class="clientEchartsStyle"></div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark orderSituation">
                <div>
                  <span>商品销售情况</span>
                  <router-link to="/index">
                    详情
                    <svg class="icon icon3" aria-hidden="true">
                      <use xlink:href="#icon-test146"></use>
                    </svg>
                  </router-link>
                </div>
                <div class="cliceLeft">
                  <el-row>
                    <el-col :span="16">
                      <div class="grid-content bg-purple client">
                        <div class="clientCont">订货金额TOP10商品</div>
                        <el-row :gutter="24">
                          <el-col :span="12">
                            <div class="grid-content bg-purple clientCon">
                              <template v-for="(listO,index3) in orderSituationData">
                                <div v-if="index3<5" :key="index3">
                                  <div>
                                    <span
                                      :class="{iconSelfSa:index3<=2,iconSelfSb:index3>2}"
                                    >{{index3+1}}</span>
                                    <span>{{listO.text}}</span>
                                  </div>
                                  <div>¥{{listO.money}}</div>
                                </div>
                              </template>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <div class="grid-content bg-purple-light clientCon">
                              <template v-for="(listO,index3) in orderSituationDataTwo">
                                <div v-if="index3>=5" :key="index3">
                                  <div>
                                    <span
                                      :class="{iconSelfSa:index3<=2,iconSelfSb:index3>2}"
                                    >{{index3+1}}</span>
                                    <span>{{listO.text}}</span>
                                  </div>
                                  <div>¥{{listO.money}}</div>
                                </div>
                              </template>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple-light client">
                        <div ref="clientEchartsk" class="clientEchartsStyle"></div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="conterRightScroll"></div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
/* eslint-disable */
import echarts from 'echarts'
import { log } from 'util';
export default {
  name: 'index',
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      show: 'costAdjustment',
      stateContuct: [{ text: '今日', stateMain: true }, { text: '本周', stateMain: false }, { text: '本月', stateMain: false }, { text: '全年', stateMain: false }],
      stateMain: '今日',
      linkContData: [{ text: '订单金额', stateMain: true }, { text: '订货单数', stateMain: false }, { text: '订货客户', stateMain: false }, { text: '订单毛利', stateMain: false }],
      // 订单金额===========================================
      // 订单金额(今日、本周、本月、全年)
      todyXAxis: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24'],
      todyOrderMoneyLegend: ['今日订单金额'],
      todyDataSeries: [{
        name: '今日订单金额',
        type: 'line',
        stack: '总量',
        data: [132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 210]
      }],
      // 订单金额(昨日和今日、上周和本周、上月和本月、去年和全年)
      todyXAxisSum: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24'],
      todyOrderMoneyLegendSum: ['今日订单金额', '昨日订单金额'],
      todyDataSeriesSum: [{
        name: '今日订单金额',
        type: 'line',
        stack: '总量',
        data: [132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 210]
      }, {
        name: '昨日订单金额',
        type: 'line',
        stack: '总量',
        data: [152, 171, 144, 190, 130, 110, 232, 201, 334, 190, 130, 110]
      }],
      // 数据发生改变时重新赋值
      // 选中的数据
      checkList: [],
      selectStatic: true,
      selectData: { now: { conMoney: 1794, ConOrderSingular: 258, gross: 14589, client: 152455 }, before: { conMoney: 2094, ConOrderSingular: 252, gross: 145889, client: 152445 } },
      // 区别向后台传参
      timeParameter: 0, // 0=>今日,1=>本周,2=>本月,3=>全年
      selectParameter: 0, // 0=>订单金额,1=>订货单数,2=>订货客户,3=>订单毛利
      orderSituationData: [{ text: 'jnboy', money: '5.20' },
      { text: '0001', money: '5.20' },
      { text: '深圳新沙天虹 ', money: '5.20' },
      { text: 'GDSZ', money: '5.20' },
      { text: '广州海珠新光百货店 ', money: '5.20' },
      { text: '乔老大', money: '5.20' },
      { text: '深圳仓', money: '5.20' },
      { text: '深圳宝能太古', money: '5.20' },
      { text: '123', money: '5.20' },
      { text: '广州太古汇店', money: '5.20' }],
      // 订单总金额
      sumCount: 4000,
      orderSituationDataTwo: [{ text: '毛衣外套女韩版潮新款2016秋季宽松高领针织衫套头', money: '5.20' },
      { text: '羽绒服', money: '5.20' },
      { text: '2017春夏新款学院风纯棉圆领条纹假两件减龄卫衣女上衣', money: '5.20' },
      { text: '背心式文胸无钢圈无痕冰丝薄款女士运动性感内衣', money: '5.20' },
      { text: '欧洲站时尚凉鞋女一字扣2017年夏季新款真皮方头粗跟女鞋欧美高跟鞋', money: '5.20' },
      { text: '浪莎夏季女士薄款加裆连裤袜', money: '5.20' },
      { text: '欧美2017新款凉鞋女夏真皮头层牛皮高跟粗跟包头方头女鞋', money: '5.20' },
      { text: '玫瑰医用修复面膜', money: '5.20' },
      { text: '当季新款网红小小号同款锁扣包蝴蝶结绸缎包单肩手提斜跨女包潮真皮', money: '5.20' },
      { text: '订做款韩版长袖睡衣女秋冬季纯棉套装薄款甜美可爱学生宽松家居服', money: '5.20' }],
      // 销售总金额
      sumCountTwo: 80000
    }
  },
  methods: {
    onSubmit () {
      // console.log(this.form)
    },
    showCommodityList (index) {
      this.num = index
    },
    clickShuo (index) {
      this.selectParameter = index
      // console.log(index)
      let arrstateContuct = this.stateContuct
      for (let i = 0; i < arrstateContuct.length; i++) {
        i === index ? arrstateContuct[i].stateMain = true : arrstateContuct[i].stateMain = false
      }
      this.stateContuct = arrstateContuct
      // axios获取数据赋值变量
      this.axiosPostData()
    },
    clickSelect (index2) {
      // console.log(index2)
      let arrstateContuct = this.linkContData
      for (let i = 0; i < arrstateContuct.length; i++) {
        i === index2 ? arrstateContuct[i].stateMain = true : arrstateContuct[i].stateMain = false
      }
      this.linkContData = arrstateContuct
    },
    checkboxModel () {
      // console.log(this.checkList)
      var domMainEcharts = this.$refs.mainEcharts
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(domMainEcharts, 'macarons')
      myChart.clear()
      var option = {
        // title: {
        //   text: '折线图堆叠'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.todyOrderMoneyLegend
        },
        grid: {
          left: '3%',
          right: '80px',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          name: '时间/2小时',
          type: 'category',
          boundaryGap: false,
          data: this.todyXAxis
        },
        yAxis: {
          name: '订单金额/元',
          type: 'value'
        },
        series: this.todyDataSeries
      }
      var optionSum = {
        // title: {
        //   text: '折线图堆叠'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.todyOrderMoneyLegendSum
        },
        grid: {
          left: '3%',
          right: '80px',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          name: '时间/2小时',
          type: 'category',
          boundaryGap: false,
          data: this.todyXAxisSum
        },
        yAxis: {
          name: '订单金额/元',
          type: 'value'
        },
        series: this.todyDataSeriesSum
      }
      // myChart.setOption(optionSum, true)
      switch (this.checkList.length) {
        case 0:
          this.selectStatic = true
          myChart.setOption(option, true)
          break
        case 1:
          this.selectStatic = false
          myChart.setOption(optionSum, true)
          break
      }
    },
    // 封装一个axios获取数据的方法
    axiosPostData () {
      // this.$axios
      //   .post('good/OnlineFoodDetails', {
      //     goods_id: this.timeParameter
      //     goods_id: this.selectParameter
      //   })
      //   .then((response) => {
      //   })
      //   .catch(function (error) {
      //     console.log(error)
      //   })
      switch (this.timeParameter) {
        // 今日
        case 0:
          switch (this.selectParameter) {
            // 订单金额
            case 0:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订货单数
            case 1:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订货客户
            case 2:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订单毛利
            case 3:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
          }
          break
        // 本周
        case 1:
          switch (this.selectParameter) {
            // 订单金额
            case 0:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订货单数
            case 1:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订货客户
            case 2:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订单毛利
            case 3:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
          }
          break
        // 本月
        case 2:
          switch (this.selectParameter) {
            // 订单金额
            case 0:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订货单数
            case 1:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订货客户
            case 2:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订单毛利
            case 3:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
          }
          break
        // 全年
        case 3:
          switch (this.selectParameter) {
            // 订单金额
            case 0:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订货单数
            case 1:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订货客户
            case 2:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
            // 订单毛利
            case 3:
              // this.todyXAxis =
              //   this.todyOrderMoneyLegend =
              //   this.todyDataSeries =
              break
          }
          break
      }
    }
  },
  watch: {
    // checkList () {
    //   this.checkboxModel()
    // }
  },
  computed: {

  },
  mounted () {
    this.$nextTick(() => {
      // console.log(this.$refs.mainEcharts)
      var domMainEcharts = this.$refs.mainEcharts
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(domMainEcharts, 'macarons')
      // 绘制图表
      var option = {
        // title: {
        //   text: '折线图堆叠'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.todyOrderMoneyLegend
        },
        grid: {
          left: '3%',
          right: '80px',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          name: '时间/2小时',
          type: 'category',
          boundaryGap: false,
          data: this.todyXAxis
        },
        yAxis: {
          name: '订单金额/元',
          type: 'value'
        },
        series: this.todyDataSeries
      }
      myChart.setOption(option, true)
      // 甜甜圈
      var domMainEchartsk = this.$refs.clientEcharts
      // 基于准备好的dom，初始化echarts实例
      var myChartk = this.$echarts.init(domMainEchartsk, 'macarons')
      var optionAclic = {
        title: {
          text: '订单总金额\n\n' + this.sumCount + '元',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal',
            color: '#474747'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '<center>{b}</center>订单金额：{c} <br />占比：{d}%'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['零售', '代理商', '批发商']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '零售' },
              { value: 310, name: '代理商' },
              { value: 234, name: '批发商' }
            ]
          }
        ]
      }
      myChartk.setOption(optionAclic, true)
      // 第二个圆圈
      var domMainEchartskj = this.$refs.clientEchartsk
      // 基于准备好的dom，初始化echarts实例
      var myChartkj = this.$echarts.init(domMainEchartskj, 'macarons')
      var optionAclicj = {
        title: {
          text: '销售总金额\n\n' + this.sumCountTwo + '元',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal',
            color: '#474747'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '<center>{b}</center>订单金额：{c} <br />占比：{d}%'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['零售', '代理商', '批发商']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '零售' },
              { value: 310, name: '代理商' },
              { value: 234, name: '批发商' }
            ]
          }
        ]
      }
      myChartkj.setOption(optionAclicj, true)
      window.onresize = function () {
        myChart.resize()
        myChartk.resize()
        myChartkj.resize()
      }
    });
    this.$axios
      .post('index/index', {
      })
      .then((response) => {
        console.log(response);

      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bd {
  border: 1px solid red;
}
.rightConter {
  width: 100%;
  margin: 10px 10px 10px 0;
  height: calc(100vh - 80px);
  // background: red;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.conterLeftScroll {
  width: 100%;
  max-height: calc(100vh - 80px);
  overflow-y: scroll;
  overflow-x: hidden;
}
/*滚动条样式*/
.conterLeftScroll::-webkit-scrollbar {
  width: 8px;
  /*height: 4px;*/
}
.conterLeftScroll::-webkit-scrollbar-thumb {
  // border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(195, 195, 195, 1);
}
.conterLeftScroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(195, 195, 195, 0.1);
}
// 125
.conterRightScroll {
  margin-left: 10px;
  width: 322px;
  height: calc(100vh - 80px) !important;
  // height: 900px;
  background-color: #ffffff;
}
.tomGeneralMain {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffffff;
  padding: 0 16px 16px 16px;
}
.tomGeneral {
  width: 100%;
  height: 47px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.tomGeneral > span {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
.tomGeneralCounter {
  width: 100%;
  height: 116px;
}
.tomCounter {
  width: 76px;
  height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tomCounter > div:nth-child(1) {
  margin-bottom: 10px;
  width: 100%;
  min-height: 66px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.tomCounter > div:nth-child(1) {
  font-size: 24px;
  color: #4a4f52;
  font-weight: bold;
}
.tomCounter > div:nth-child(2) {
  font-size: 14px;
  color: #666666;
}
.color1 {
  color: #ff3838 !important;
}
.bg-tomcounter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tomCounter2 {
  position: relative;
  width: 66px !important;
  height: 66px;
  border-radius: 50%;
  background-color: #f0fbff;
}
.tomGeneralMain2 {
  width: 10px;
  height: 180px;
}
@media (max-width: 1450px) {
  .show6u {
    display: none !important;
  }
}
@media (min-width: 1450px) {
  .show8u {
    display: none !important;
  }
}
.tomCounter2 {
  .icon {
    width: 30px;
    height: 30px;
  }
  .icon2 {
    width: 42px;
    height: 42px;
  }
}
.ringr {
  position: absolute;
  top: 0;
  right: -12px;
  font-size: 12px;
  padding: 2px 4px;
  color: #20ade5;
  background: #fff;
  border: 1px solid #20ade5;
  border-radius: 9px;
  font-weight: normal;
}
.rightHeadLine {
  margin: 10px 0px;
}
.rightHeadLineCon {
  // margin-left: 5px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  // width: 100%;
  height: 38px;
  background-color: #ffffff;
}
.rightHeadLineCon > div {
  margin-left: 32px;
  color: #333333;
  font-size: 14px;
}
.rightHeadLineCon > div:nth-child(1) {
  margin-left: 16px;
}
.rightHeadLineCon > div:hover {
  cursor: pointer;
}
.el-row {
  margin: 0 !important;
}
.showColor {
  color: #20ade5 !important;
}
.showLive {
  display: none;
}
.generalcont {
  width: 100%;
  height: 504px;
  background-color: #ffffff;
}
.generalcont > div:nth-child(1) {
  margin: 0 16px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.generalcont > div:nth-child(1) > span:nth-child(1) {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
.generalcont > div:nth-child(1) > :nth-child(2) {
  font-size: 12px;
  color: #9b9b9b;
}
.icon3 {
  width: 13px;
  height: 13px;
}
.generalcont > div:nth-child(2) {
  margin: 0 16px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.linkCont {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.linkCont {
  div {
    width: 78px;
    height: 22px;
    border: 1px solid #e3e3e3;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #333333;
  }
  div:hover {
    cursor: pointer;
  }
  div:first-child {
    border-radius: 5px 0 0 5px;
  }
  div:last-child {
    border-radius: 0 5px 5px 0;
  }
  .divcolorB {
    border-color: #20ade5;
    color: #20ade5;
  }
}
.sumEcharts {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.echartsLine {
  width: 85%;
  height: 350px;
}
.echartsRight {
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.echartsRight > div {
  margin: 0 0 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.echartsRight > div > span:nth-child(1) {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.echartsRight > div > span:nth-child(2) {
  font-size: 24px;
  color: #20ade5;
}
.echartsRight > div > span:nth-child(3) {
  font-size: 20px;
  color: #999;
}
.orderSituation {
  margin-top: 10px;
  width: 100%;
  height: 276px;
  background-color: #ffffff;
}
.orderSituation > div:nth-child(1) {
  margin: 0 16px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.orderSituation > div:nth-child(1) > span:nth-child(1) {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
.orderSituation > div:nth-child(1) > :nth-child(2) {
  font-size: 12px;
  color: #9b9b9b;
}
.client:nth-child(1) {
  margin: 0 16px;
  height: 212px;
}
.clientCon {
  height: 170px;
}
.clientCont {
  color: #333333;
  font-size: 14px;
  margin: 16px 0 6px 0;
}
.clientCon > div {
  margin-bottom: 10px;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.clientCon > div > div:nth-child(1) {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.clientCon > div > div:nth-child(1) {
  color: #666666;
  font-size: 14px;
}
.clientCon > div > div:nth-child(1) > span:nth-child(2) {
  // width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 省略号在第几行 */
  -webkit-box-orient: vertical;
}
.clientCon > div > div:nth-child(2) {
  color: #333333;
  font-size: 16px;
  margin-right: 16px;
}
.iconSelfSa {
  margin-right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #778f99;
  color: #ffffff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.iconSelfSb {
  margin-right: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #778f99;
  color: #778f99;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.clientEchartsStyle {
  margin-top: 41px;
  height: 170px;
  border-left: 1px solid #e3e3e3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.tomGeneralMain {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffffff;
  padding: 0 16px 16px 16px;
}
.tomGeneral {
  width: 100%;
  height: 47px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.tomGeneral > span {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
.tomGeneralCounter {
  width: 100%;
  height: 116px;
}
.tomCounter {
  width: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.tomCounter > div {
  width: 100%;
  min-height: 66px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.tomCounter > div:nth-child(1) {
  font-size: 24px;
  color: #4a4f52;
  font-weight: bold;
}
.tomCounter > div:nth-child(2) {
  font-size: 14px;
  color: #666666;
}
.color1 {
  color: #ff3838 !important;
}
</style>
